1
00:00:00,600 --> 00:00:01,800
Hello and welcome.

2
00:00:01,910 --> 00:00:09,520
In this video we are going to be creating a directory and also all the hastier mail for the project.

3
00:00:09,750 --> 00:00:16,750
I have already created a directory on my desktop and I've called it whack a mole.

4
00:00:17,040 --> 00:00:24,390
And they were created directory just barite clicking on the desktop clicking on new folder and then

5
00:00:24,400 --> 00:00:26,480
giving a tree a name.

6
00:00:26,700 --> 00:00:30,770
So that's how I created my tree.

7
00:00:30,780 --> 00:00:40,270
Next thing I want to do is add an hastier mail file board before I do that I added a couple of images

8
00:00:40,270 --> 00:00:47,670
so if I open up the directory see I've added two images that we are going to use for the project.

9
00:00:48,150 --> 00:00:55,450
Basically this is one of my more and this is going to act as the dirt or the actual More Hill.

10
00:00:55,660 --> 00:01:04,860
So I grabbed these images from Google images because they are educational purposes.

11
00:01:05,430 --> 00:01:10,880
Be able to get away with it if you are going to use it for anything other than educational purposes.

12
00:01:10,920 --> 00:01:16,140
You need to seek the permission of the image owner.

13
00:01:16,360 --> 00:01:20,850
All right so feel free to use your own images.

14
00:01:20,940 --> 00:01:31,290
So now that we've got the projet directory created I have got two images in there next and I want to

15
00:01:31,290 --> 00:01:34,930
do is add an hastier mail file.

16
00:01:35,490 --> 00:01:42,120
I will be using this sublime text editor as my preferred tool for this project.

17
00:01:42,450 --> 00:01:48,870
So this is a blank file within the editor so I'm going to save this file as my hastier mouth document

18
00:01:49,170 --> 00:01:52,160
so I'm going to save it to the derrick.

19
00:01:52,210 --> 00:02:00,090
We created the dough tree that already has two images so I'm going to call this specifically index.

20
00:02:00,420 --> 00:02:04,010
Not huge amount but this would be my index.

21
00:02:04,090 --> 00:02:07,720
Put a similar file on all quixey.

22
00:02:08,670 --> 00:02:17,190
So that's the name of the file indexed or email and on the bottom right you can see says L which means

23
00:02:17,190 --> 00:02:21,150
the content will be an email file.

24
00:02:21,360 --> 00:02:28,800
I've already priests teach the court I am going to DHT and explain the code.

25
00:02:29,010 --> 00:02:33,420
So this is the hatim old code will be used in school like one.

26
00:02:33,420 --> 00:02:36,410
Here is the dog type the dog type.

27
00:02:36,410 --> 00:02:44,230
If a declaration notifies the web browsers that the content of the document is and his team have five

28
00:02:44,250 --> 00:02:53,610
documents lying to 35 is the height called hastier email client so online to here we've got the line.

29
00:02:53,610 --> 00:03:03,030
This is just a tribute specify that it's in English and means English so we have a copperhead section

30
00:03:03,030 --> 00:03:12,400
which is on line 3 to line 7 inside the headset and we've got dimitar car set with the attribute.

31
00:03:12,640 --> 00:03:14,490
These are tribute concert.

32
00:03:14,490 --> 00:03:20,670
It's got a value of etive Dash 8 which is the standard Unicode.

33
00:03:20,790 --> 00:03:22,280
Basically we use to have paid.

34
00:03:22,300 --> 00:03:25,080
I can understand most characters.

35
00:03:25,090 --> 00:03:30,360
Line 5 is a title for the game.

36
00:03:30,420 --> 00:03:35,460
This is a title that will appear on the title bar off the web browser.

37
00:03:35,910 --> 00:03:39,950
Line 6 is a reference to the external stylesheet.

38
00:03:39,960 --> 00:03:41,300
I will be using.

39
00:03:41,300 --> 00:03:49,220
I have not created it yet but when I do is going to record my standard of success he can see what Hey

40
00:03:49,290 --> 00:03:57,650
Treff attribute basically is used to indicate the location of the Says because I am having this here.

41
00:03:57,690 --> 00:04:01,000
This file in the same directory as the hastier mail.

42
00:04:01,080 --> 00:04:04,990
All I need to do is just reference the name here.

43
00:04:05,160 --> 00:04:14,070
This is the end of the heading tag on my cell underbody section begins on mine 7 online 8 and end on

44
00:04:14,340 --> 00:04:18,720
line 34.

45
00:04:19,050 --> 00:04:20,450
Inside the body.

46
00:04:20,470 --> 00:04:26,510
So any of the contents inside the body tag is the actual visible content.

47
00:04:26,570 --> 00:04:29,720
You can see so inside the body.

48
00:04:29,800 --> 00:04:31,120
Hey Twan head in tag.

49
00:04:31,140 --> 00:04:35,050
Which would be the main title for the game.

50
00:04:35,330 --> 00:04:41,270
Whack it will also have a span element and inside that span element.

51
00:04:41,280 --> 00:04:44,170
I have given this plan a class of score.

52
00:04:44,370 --> 00:04:52,590
So what that means is that the scoring counter for the game will be on the same line as this heading

53
00:04:52,770 --> 00:04:53,260
tag.

54
00:04:53,310 --> 00:04:59,820
That's why we have got a span tag and then with a button inside the bottom we've attached the.

55
00:05:00,060 --> 00:05:01,530
Click methot.

56
00:05:01,680 --> 00:05:02,410
So there win.

57
00:05:02,430 --> 00:05:09,150
But in this clicked it would trigger a function and this function is going to trigger is called start

58
00:05:09,450 --> 00:05:12,300
the game or stuck in this function.

59
00:05:12,300 --> 00:05:15,620
We will create Later inside our javits group.

60
00:05:15,700 --> 00:05:21,890
Now Im just attaching it to this on click it up to when they use on click.

61
00:05:21,890 --> 00:05:29,610
So one clicks on the bottom it will trigger on this unclick event and that in turn will call this function

62
00:05:29,700 --> 00:05:33,430
to execute the code inside the function.

63
00:05:33,710 --> 00:05:41,880
And here this will be the actual text that will be displayed on the bottom saw line 13 we've got.

64
00:05:41,910 --> 00:05:42,960
He did.

65
00:05:43,140 --> 00:05:45,520
I'm giving this a class of game.

66
00:05:45,540 --> 00:05:48,400
So this the open ended and this is closing here.

67
00:05:48,540 --> 00:05:55,710
So this will help form the game container inside this class called Game.

68
00:05:55,770 --> 00:06:01,610
We can have the different halls for the mall.

69
00:06:01,830 --> 00:06:05,350
So there's a diagram here will form also.

70
00:06:05,460 --> 00:06:12,130
This will count as one hole how or duplicate that six times to create six holes.

71
00:06:12,690 --> 00:06:17,010
So each of these holes will represent the outhaul mall.

72
00:06:17,070 --> 00:06:21,470
He'll have a whole one and then we've got a.

73
00:06:21,480 --> 00:06:26,940
So the idea is that this glass he has called to call this is hole one.

74
00:06:27,130 --> 00:06:29,950
And we also got inside that hole.

75
00:06:30,060 --> 00:06:37,990
We are also created on the Deep inside inside which all we have on the deed that will contain the mall.

76
00:06:38,130 --> 00:06:42,680
So the actual mall will pop out from the top.

77
00:06:42,780 --> 00:06:47,840
So this mall here is what more so define inside the team.

78
00:06:48,060 --> 00:06:53,790
So the idea is to get the Mall poor pout out of the hall so go.

79
00:06:53,830 --> 00:07:03,730
HALL One two three four five and each of the each of them have a subclass that contains the mall.

80
00:07:03,840 --> 00:07:10,350
So the idea of the game is for the more to pop out out of any of these six hall.

81
00:07:10,350 --> 00:07:15,510
So he's going to randomly pop out of any of them lie.

82
00:07:15,580 --> 00:07:16,400
33.

83
00:07:16,410 --> 00:07:20,180
We've got a script tag here and we've got a source a tribute.

84
00:07:20,320 --> 00:07:25,830
We were referencing the extent of Jarvis kreipe inside it's extempore javascript is where we'll defined

85
00:07:25,830 --> 00:07:34,200
the functionality for the mom to pop out of the hall and the javascript file and create an app and call

86
00:07:34,200 --> 00:07:35,380
it my script.

87
00:07:35,410 --> 00:07:37,110
Jesus I have not created a yet.

88
00:07:37,170 --> 00:07:39,620
When I do this is a name.

89
00:07:39,780 --> 00:07:41,670
Give it notice.

90
00:07:41,780 --> 00:07:42,660
Please describe.

91
00:07:42,660 --> 00:07:43,150
Right.

92
00:07:43,200 --> 00:07:46,640
But I meant just before the close in body type.

93
00:07:46,650 --> 00:07:55,680
This is important because if you place your script too far up the page the script may execute and prevent

94
00:07:55,800 --> 00:08:03,390
parts of the page from loading because all is good practice to attach this script to the just before

95
00:08:03,390 --> 00:08:09,630
the closing body tag line 35 is the closing hatim on stack.

96
00:08:09,690 --> 00:08:15,490
I'm just going to click on save save or and that's the hits here.

97
00:08:15,490 --> 00:08:19,270
I have completed so we could take a quick look at what it looks like.

98
00:08:19,370 --> 00:08:23,310
This is my directory so I'm just going to click on this email file.

99
00:08:23,310 --> 00:08:26,000
I don't expect anything fancy.

100
00:08:26,220 --> 00:08:29,780
You can see all it saying is this is the title.

101
00:08:29,790 --> 00:08:33,150
This we form the scoring for the game later.

102
00:08:33,170 --> 00:08:38,480
This is just the start button so that is it for this.

103
00:08:38,730 --> 00:08:45,330
In the next logia will add some C S S to make the game look more presentable.

104
00:08:45,330 --> 00:08:47,590
Thanks for watching and bye for now.